<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-02 20:10:48
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-02 20:29:29
 * @FilePath: \2306\week3t\3. 组件嵌套(创建一个父组件和子组件，展示组件嵌套的使用).html
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组件嵌套</title>
</head>
<body>
    <div id="app">
        <parent-component></parent-component>
        <!-- <child-component2></child-component2> -->
         <!-- <child-component></child-component> -->
    </div>

    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script>
        // 子组件
        var ChildComponent = {
            template: '<div>这是一个子组件</div>'
        };

        // 父组件
        Vue.component('parent-component', {
            components: {
                'child-component': ChildComponent
            },
            template: '<div><child-component></child-component></div>'
        });

        var app = new Vue({
            // components: {
            //     'child-component2': ChildComponent
            // },
            el: '#app'
        });
    </script>
</body>
</html>
